<template>
	<view class="tui-set-box">
		<tui-list-cell padding="0" :lineLeft="false" :arrow="false">
			<view class="tui-list-cell tui-info-box" @tap="toPerson">
				<image :src="userInfo.headImgUrl||'/static/images/mall/mine_def_touxiang_3x.png'" class="tui-avatar"></image>
				<view class="nickname">{{userInfo.nickname}}</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<button v-if="bindPhone" class="nickname btn-mobile" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">手机号快捷登录</button>
			<!-- #endif -->
		</tui-list-cell>
		<view class="tui-mtop">
			<!-- <tui-list-cell :hover="false" :arrow="true" @click="aboutUs">
        关于我们
			</tui-list-cell> -->
			<!-- #ifndef APP-PLUS || H5 -->
			<tui-list-cell :lineLeft="false" :arrow="true" @click="openSetting">
        授权设置
			</tui-list-cell>
			<!-- #endif -->
			<tui-list-cell :lineLeft="false" :arrow="true" @click="jump(1)">
        用户协议
			</tui-list-cell>
			<tui-list-cell :lineLeft="false" :arrow="true" @click="jump(2)">
        隐私协议
			</tui-list-cell>
		</view>
		<view class="tui-exit">
			<tui-button @click="exit" type="danger" height="88rpx">退出登录</tui-button>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const app = getApp()
	export default {
		data() {
			return {
				userInfo: {},
				bindPhone: false
			}
		},
		onShow: function() {
			let that = this;
			util.request('user/userInfo').then(function(res) {
				if (res.code === 0) {
					if (!res.data.mobile) {
						that.bindPhone = true;
					}
					that.userInfo = res.data;
				}
			});
		},
		methods: {
			toPerson() {
				uni.navigateTo({
					url: '/pages/ucenter/person/person'
				})
			},
			jump(id) {
				uni.navigateTo({
					url: '/pages/auth/richtext/richtext?id=' + id
				})
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					uni.login({
						success: function(r) {
							let code = r.code; //登录凭证
							util.request("auth/LoginByMaPhone", {
								userId: uni.getStorageSync('userId'),
								code: code,
								userInfo: e.detail
							}, 'POST', 'application/json').then(res => {
								if (res.code === 0) {
									uni.switchTab({
										url: '/pages/ucenter/index/index',
									})
								} else {
									util.toast('请重新授权')
								}
							}).catch(ex => {
								console.log(ex, "ex")
							});
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '为了获得更好的服务，请允许授权'
					})
				}
			},
			openSetting: function() {
				uni.openSetting()
			},
			aboutUs: function() {
				uni.navigateTo({
					url: '/pages/ucenter/about/about',
				})
			},
			exit: function() {
				app.globalData.userInfo = {
					nickname: 'Hi,游客,点击头像登录',
					headImgUrl: '/static/images/mall/mine_def_touxiang_3x.png'
				}
				uni.clearStorage({
					success() {
						util.toast('退出成功');
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/auth/login/login',
							})
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style>
	.tui-set-box {
		padding-bottom: 20rpx;
		color: #333;
	}

	.tui-list-cell {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		font-size: 26rpx;
	}

	.tui-info-box {
		font-size: 30rpx;
	}

	.tui-avatar {
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
	}

	.tui-mtop {
		margin-top: 20rpx;
	}

	.tui-exit {
		padding: 50rpx 50rpx;
	}

	.nickname {
		margin-top: 60rpx;
		font-size: 26rpx;
    font-weight: bold;
	}

	.btn-mobile {
		width: 200rpx;
		background: #E41F19 !important;
		color: white;
		font-size: 20rpx;
		margin-right: 20rpx;
	}
</style>
